<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">

    <title>Room of metal</title>

    <link href='http://fonts.googleapis.com/css?family=UnifrakturMaguntia' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="style.css">
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>

  <body>
    <h1>Room of metal</h1>

    <button class="play">Play</button>
    <button class="stop">Stop</button>

    <p class="listener-data">Listener data:</p>
    <p class="panner-data">Panner data:</p>


    <section class="room">
      <div class="flex-wrapper">
        <div class="pulse-wrapper">
          <div class="boom-box"></div>
        </div>
      </div>
      <button class="move zoom-in"></button>
      <button class="move zoom-out"></button>
      <button class="move left"></button>
      <button class="move right"></button>
    </section>

    <p>After pressing Play, use the left, right, zoom in and zoom out buttons to control your position; run this on a computer with stereo sound to see how this affects the sound spatialisation.</p> 

    <p>Boom box icons courtesy of <a href="http://www.flaticon.com/free-icon/boom-box-with-controls-and-settings_26643">flatiron.com</a>, and created by <a href="http://www.flaticon.com/authors/freepik">Freepik</a>, <a href="http://www.flaticon.com/authors/appzgear">Appzgear</a> and <a href="http://www.flaticon.com/authors/adam-whitcroft">Adam Whitcroft</a></p>
  </body>
<script src="main.js"></script>
</html>
